<template>
	<el-button type="primary" @click="
		title = '添加管理员';
	dialogVisible01 = true;
	">添加管理员</el-button>
	<el-dialog v-model="dialogVisible01" :rulse="resule" title="添加管理员" width="30%">
		<el-form :model="roleMoudle" label-width="100px" style="padding-right: 30px">
			<el-form-item label="学校" prop="school">
				<el-select placeholder="---请选择学校---">
					<el-option v-for="c in roles" :key="c.id" :label="c.name" :value="c.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="用户名" prop="nickName">
				<el-input minlength="1" maxlength="10"></el-input>
			</el-form-item>
			<el-form-item label="账号" prop="userNo">
				<el-input minlength="1" maxlength="10"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="userPwd">
				<el-input minlength="1" maxlength="10"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible01 = false">取消</el-button>
				<el-button type="primary" @click="addRole()"> 确认 </el-button>
			</span>
		</template>
	</el-dialog>

</template>

<script setup>
import { Edit, Delete } from "@element-plus/icons-vue";
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const dialogVisible01 = ref(false);
const roles = ref([
	{ id: 1, name: '学校 A' },
	{ id: 2, name: '学校 B' },
	{ id: 3, name: '学校 C' }
]);

</script>

<style lang="scss">
.page-container {
	min-height: 100%;
	box-sizing: border-box;

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.all {
	border-left: none;
	float: right;
	width: 100%;
	height: 95vh;
	box-shadow: 0px 0.3px 11px rgba(0.2, 0.2, 0.2, 0.2);
}

.head {
	border-left: none;
	border-top: none;
	width: 100%;
	height: 60px;
	box-shadow: 0px 0.3px 11px rgba(0.2, 0.2, 0.2, 0.2);
}

.head .head1 {
	margin-left: 10px;
	display: inline;
	width: 40px;
	height: 50px;
	line-height: 60px;
	font-size: 18px;
}

.head2 {
	margin-left: 160px;
	display: inline;
	width: 40px;
	height: 50px;
	font-size: 16px;
	color: #000000A6;
}

.head3 {
	margin-left: 20px;
	display: inline;
	width: 40px;
	height: 50px;
	font-size: 16px;
	color: #000000A6;
}

.headBox {
	box-shadow: 0px 0.3px 11px rgba(0.2, 0.2, 0.2, 0.2);
	margin-top: 25px;
	width: 100%;
	font-size: 16px;
	line-height: 28px;
	padding: 15px;
}
</style>